<template>
  <section class="body fy-flex fy-flex__center fy-flex__column">
    <img src="../assets/screen/bg_a.png" class="body__bg"/>
    <div class="header fy-flex fy-flex__center">
      <screen-nav :id="getNavArrayId(0)"></screen-nav>
      <img class="header-img" src="../assets/screen/title.png"/>
      <screen-nav :id="getNavArrayId(1)"></screen-nav>
    </div>
    <div class="screen fy-flex fy-flex__center">
      <div class="components left">
        <screen-components :id="getComponentsArrayId(0)"></screen-components>
      </div>
      <div class="components content">
        <screen-components :id="getComponentsArrayId(1)"></screen-components>
      </div>
      <div class="components right" >
        <screen-components :id="getComponentsArrayId(2)"></screen-components>
      </div>
    </div>
  </section>
</template>
<script>
import ScreenNav from "@/components/screen/ScreenNav.vue";
import ScreenComponents from "@/components/screen/ScreenComponents.vue";

export default {
  // 全局感知
  name: "screen",

  // 模板依赖
  components: {
    ScreenNav,
    ScreenComponents
  },
  filters: {},

  // 接口
  props: {},

  // 本地状态
  data() {
    return {
      navArray: [],
      componentsArray: []
    };
  },
  computed: {},
  // 事件
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.navArray = this.$route.params.navArray || [];
    this.componentsArray = this.$route.params.componentsArray || [];
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  // 非响应式的属性
  methods: {
    clickScreen(msg) {
      console.log(msg);
    },
    getNavArrayId(msg) {
      let id = -1;
      if (msg === 0) {
        this.navArray.length > 0 ? (id = this.navArray[0].id) : id;
      } else if (msg === 1) {
        this.navArray.length > 1 ? (id = this.navArray[1].id) : id;
      }
      return id;
    },
    getComponentsArrayId(msg) {
      let id = -1;
      if (msg === 0) {
        this.componentsArray.length > 0
          ? (id = this.componentsArray[0].id)
          : id;
      } else if (msg === 1) {
        this.componentsArray.length > 1
          ? (id = this.componentsArray[1].id)
          : id;
      } else if (msg === 2) {
        this.componentsArray.length > 2
          ? (id = this.componentsArray[2].id)
          : id;
      }
      return id;
    }
  }
};
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  padding: 0 0.5vw;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  background: #051753;
  .body__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
  }
}
.header {
  width: 100vw;
  height: 10vh;
  z-index: 1;
  .header-img {
    width: 20vw;
  }
}
.screen {
  width: 100vw;
  height: 90vh;
  z-index: 1;
  .components {
    padding: 0 0.5vw 2rem 0.5vw;
    width: 33vw;
    height: 90vh;
    box-sizing: border-box;
  }
}
</style>
